<template>
  <div class="block" style="font-size:14px;">
    <slot></slot>
    <div style="height:45px;width:300px;display: inline-block;">
      <el-input v-model="text" size="small" clearable :placeholder="searchText">
        <el-button @click="searchData" slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
  </div>
</template>
<style lang="scss">
  .block{
    display: inline-block;
  }
.search {
  float: right;
  outline: none;
  cursor: pointer;
  font-size: 13px;
  width: 250px;
  border: 1px solid #bfcbd9;
  margin: 20px 8px 10px 0;
  padding: 6px 10px;
  border-radius: 5px;
}
.search::after {
  content: "";
  display: block;
  clear: both;
}
</style>
<script>
export default {
  data() {
    return {
      count: 0,
      text:'',
    };
  },
  created() {},
  props: {
    searchEvent: {
      default: ""
    },
    searchText: {
      default: "请输入查询内容"
    },
    value:{
      default: ""
    }
  },
  computed: {},
  watch: {
    value(val){
      this.text = val
    }
  },
  methods: {
    onEnter(){
      // console.log('@@@');
    },
    searchData(){
      this.$emit(this.searchEvent, this.text);
    },
    //清空值方法
    clearText(){
      this.text = ''
    }
  }
};
</script>


